<template>
    <div class="wrap">
        <div class="table-main">
            <div style="float: right;display: flex">
                <el-input style="margin-right: 0.5rem" placeholder="请输入想要查询的手机号" v-model.trim="selectPhone"
                          @keyup.enter.native="filterPhone"/>
                <el-button type="primary" @click="filterPhone" icon="el-icon-search">查询
                </el-button>
            </div>
            <el-table
                    size="small"
                    :cell-style="rowStyle"
                    :data="tableData">
                <el-table-column
                        prop="phone"
                        label="用户手机号"
                        width="200"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        prop="integral"
                        label="当前积分"
                        width="200"
                        header-align="center">
                </el-table-column>
                <el-table-column
                        label="兑换"
                        width="150" header-align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="goExchange(scope.row.phone,scope.row.integral)">
                            去兑换
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="可兑换"
                        width="150" header-align="center">
                    <template slot-scope="scope">
                        <el-popover
                                placement="bottom"
                                title="商品列表"
                                width="300"
                                trigger="click">
                            <el-scrollbar style="height: 240px">
                                <div class="list">
                                    <div v-for="item in exchangeList" class="list-item">
                                        <el-image style="width: 40px;height: 40px" :src="item.imgUrl"></el-image>
                                        <div style="font-weight: 600;width: 75px">{{item.name}}</div>
                                        <div style="color: #848282">积分:{{item.exchange}}</div>
                                        <el-button size="mini" type="primary" @click="exchangeIt(item,scope.row.phone)">
                                            兑换
                                        </el-button>
                                    </div>
                                </div>
                                <el-empty :image-size="150" v-if="exchangeList.length===0"></el-empty>
                            </el-scrollbar>
                            <el-button slot="reference" @click="getExchangeGoods(scope.row.phone)" v-popover:popover
                                       size="small" type="plain">查看商品
                            </el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="记录"
                        width="150" header-align="center">
                    <template slot-scope="scope">
                        <el-button slot="reference" @click="getHistory(scope.row.phone)" v-popover:popover
                                   size="small" type="plain">历史兑换
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-drawer
                :show-close="false"
                title="兑换历史"
                :visible.sync="historyShow"
                direction="rtl"
                :before-close="handleClose">
            <el-scrollbar style="height: 100%;width: 100%;background-color: rgb(244,245,246)">
                <el-empty :image-size="200" v-if="historyList.length===0"></el-empty>
                <div class="history-item" v-for="item in historyList">
                    <div class="history-item-content">
                        <el-image :src="item.integralGoods.imgUrl" style="width: 50px;height: 45px;margin-left: 1rem"/>
                        <div style="font-size: 24px;font-weight: 500">{{item.integralGoods.name}}</div>
                        <div style="padding-top: 1.6rem">
                            <div>消耗积分:
                                <span style="font-size: 22px;color: #214182">
                                -{{item.integralGoods.exchange}}
                                    </span>
                            </div>
                            <div class="exchange-history-time">
                                兑换时间:{{item.time}}
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </el-drawer>
        <exchange :good="good" :userPhone="userPhone" :exchangeShow="exchangeShow" @cancel="exchangeShow=false"/>
    </div>
</template>

<script>
    import {
        getPageIntegral,
        getIntegralByPhone,
        getExchangeGoodsByPhone,
        getHistoryExchangeByPhone
    } from '@/utils/apis/integral'
    import Exchange from "@/components/integral/Exchange";

    export default {
        name: "PointSelect",
        components: {Exchange},
        data() {
            return {
                current: 1,
                size: 10,
                tableData: [],
                total: 10,
                //查询手机号
                selectPhone: '',
                //可兑换商品列表
                exchangeList: [],
                //查询可兑换商品的第几页
                count: 1,
                historyShow: false,
                //历史记录列表
                historyList: [],
                //兑换商品
                good: {},
                //兑换手机号
                userPhone: '',
                //是否显示兑换
                exchangeShow: false,
            }
        },
        created() {
            this.initData()
        },
        methods: {
            //初始化
            initData() {
                getPageIntegral(1, 10).then(res => {
                    this.updateTableData(res.data.data)
                })
            },
            //更新表格数据
            updateTableData(data) {
                this.tableData = data.records
                this.total = data.total
            },
            //表格文字居中
            rowStyle() {
                return "text-align:center";
            },
            //去兑换
            goExchange(phone, integral) {
                this.$router.push({path: '/pointsMall', query: {phone: phone, integral: integral}})
            },
            //切换页数
            async handleCurrentChange(val) {
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                this.current = val
                await getPageIntegral(this.current, 10).then(res => {
                    this.updateTableData(res.data.data)
                    loading.close()
                })
            },
            //根据手机号过滤查询
            filterPhone() {
                if (/^1[3-9][0-9]{9}$/.test(this.selectPhone)) {
                    getIntegralByPhone(1, 10, this.selectPhone).then(res => {
                        this.updateTableData(res.data.data)
                        this.$message.success('查询成功')
                    })
                } else if (this.selectPhone === '') {
                    this.initData()
                } else {
                    this.$message.warning('手机号格式不正确')
                }
            },
            //根据手机号查询可兑换
            getExchangeGoods(phone) {
                this.exchangeList = []
                this.count = 1
                getExchangeGoodsByPhone(this.count, phone).then(res => {
                    this.exchangeList = res.data.data.records
                })
            },
            //查询兑换历史
            getHistory(phone) {
                this.historyShow = true
                getHistoryExchangeByPhone(phone).then(res => {
                    this.historyList = res.data.data.records
                })
            },
            //关闭历史弹窗回调
            handleClose() {
                this.historyShow = false
            },
            //兑换指定商品
            exchangeIt(item, phone) {
                this.good = JSON.parse(JSON.stringify(item))
                this.userPhone = phone
                this.exchangeShow = true
            }
        },
    }
</script>

<style scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .table-main {
        width: 851px;
    }

    .block {
        margin-top: 1rem;
    }

    .list {
        width: 100%;
    }

    .list-item {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 3rem;
    }

    .history-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 98%;
        height: 80px;
        box-shadow: 1px 1px 4px rgba(30, 30, 30, .3);
        margin: 5px;
        background-color: #ffffff;
    }

    .history-item-content {
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .exchange-history-time {
        font-size: 8px;
        color: #8e9aaf;
        padding-top: 0.8rem;
    }
</style>